<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show1 = true">提示弹窗</fu-button>
        <fu-dialog
          v-model:show="show1"
          title="标题"
          message="代码是写出来给人看的，附带能在机器上运行"
          @confirm="onConfirm"
        />
      </view>
    </view>
    
    <!-- 确认弹窗 -->
    <view class="demo-block">
      <view class="demo-block__title">确认弹窗</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show2 = true">确认弹窗</fu-button>
        <fu-dialog
          v-model:show="show2"
          title="标题"
          message="如果你想要得到，就要学会付出；如果你想要付出，就要学会坚持"
          show-cancel-button
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 不同主题 -->
    <view class="demo-block">
      <view class="demo-block__title">不同主题</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show3 = true" class="button-item">主要按钮</fu-button>
        <fu-button type="success" @click="show4 = true" class="button-item">成功按钮</fu-button>
        <fu-button type="warning" @click="show5 = true" class="button-item">警告按钮</fu-button>
        <fu-button type="danger" @click="show6 = true" class="button-item">危险按钮</fu-button>
        <fu-dialog
          v-model:show="show3"
          title="主要按钮"
          message="这是一条重要的消息提示"
          type="primary"
          show-cancel-button
        />
        <fu-dialog
          v-model:show="show4"
          title="成功提示"
          message="恭喜你，操作成功"
          type="success"
          show-cancel-button
        />
        <fu-dialog
          v-model:show="show5"
          title="警告提示"
          message="你确定要继续吗？"
          type="warning"
          show-cancel-button
        />
        <fu-dialog
          v-model:show="show6"
          title="危险操作"
          message="此操作不可逆，是否继续？"
          type="error"
          show-cancel-button
        />
      </view>
    </view>
    
    <!-- 自定义内容 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义内容</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show7 = true">自定义内容</fu-button>
        <fu-dialog
          v-model:show="show7"
          title="分享到"
          button-layout="column"
        >
          <view class="custom-content">
            <view 
              v-for="(item, index) in shareList"
              :key="index"
              class="share-item"
              @click="onShare(item)"
            >
              <image :src="item.icon" class="share-icon" />
              <text class="share-text">{{ item.name }}</text>
            </view>
          </view>
        </fu-dialog>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      shareList: [
        {
          name: '微信',
          icon: '/static/wechat.png'
        },
        {
          name: '朋友圈',
          icon: '/static/moments.png'
        },
        {
          name: 'QQ',
          icon: '/static/qq.png'
        },
        {
          name: '微博',
          icon: '/static/weibo.png'
        }
      ]
    }
  },
  methods: {
    onConfirm() {
      uni.showToast({
        title: '点击确定',
        icon: 'none'
      })
    },
    onCancel() {
      uni.showToast({
        title: '点击取消',
        icon: 'none'
      })
    },
    onShare(item) {
      uni.showToast({
        title: `分享到${item.name}`,
        icon: 'none'
      })
      this.show7 = false
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    overflow: hidden;
    padding: 30rpx;
  }
}

.button-item {
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-right: 0;
  }
}

.custom-content {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.share-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  
  &:active {
    opacity: 0.7;
  }
}

.share-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 16rpx;
}

.share-text {
  font-size: 24rpx;
  color: var(--fu-text-color);
}
</style> 